<template>
    <div class="pictures-lunbo">
      <el-carousel
        :interval="0"
        arrow="never"
        :autoplay="false"
        indicator-position="none"
        :before-change="handleBeforeChange"
        ref="myCarousel"
        height="440px"
        width="477px"
      >
        <el-carousel-item v-for="(imgUrl, index) in LocalimgsUrl" :key="index" >
          <img :src="imgUrl" alt="图片" @click="openDialog(imgUrl)">
        </el-carousel-item>
      </el-carousel>
      <el-dialog
      :visible.sync="dialogVisible"
      width="45%"
      height="60%"
      top="25vh"
      :before-close="closeDialog"
    >
      <img :src="dialogImage" alt="放大图片">
    </el-dialog>
      <div class="control">
        <el-button type="text" v-show="currentIndex > 0" @click="prevSlide" style="font-size: 20px;">&lt;  &nbsp;&nbsp;</el-button>
        <span class="page-indicator">{{currentIndex + 1}} / {{LocalimgsUrl.length}}</span>
        <el-button type="text" v-show="currentIndex < LocalimgsUrl.length - 1" @click="nextSlide" style="font-size: 20px;">  &nbsp;&nbsp;></el-button>
      </div>
    </div>
  </template>

<script>
export default {
  props: {
    imgsUrl: Array // 定义一个名为imgsUrl的prop，类型为Array

  },
  data () {
    return {
      currentIndex: 0,
      dialogVisible: false, // 控制对话框的显示状态
      dialogImage: '', // 存储要显示的放大图片的URL
      // 新的数据属性用于存储当前轮播图片的地址
      currentImageUrl: '', // 存储当前轮播图片的地址
      LocalimgsUrl: this.imgsUrl
    }
  },
  watch: {
    imgsUrl (newValue) {
      this.LocalimgsUrl = newValue
      this.currentIndex = 0 // 【优化】一旦切换下一卷，就从第一张图片开始
      // console.log(this.LocalimgsUrl.length, this.LocalimgsUrl)
    }
  },
  methods: {
    prevSlide () {
      this.$refs.myCarousel.prev()
      this.currentIndex--
      this.$emit('image-updated', this.currentIndex) // 传递索引而不是图片地址
      console.log(this.currentIndex)
    },
    nextSlide () {
      this.$refs.myCarousel.next()
      this.currentIndex++
      this.$emit('image-updated', this.currentIndex) // 传递索引而不是图片地址
      console.log(this.currentIndex)
    },

    // 打开对话框并显示放大图片
    openDialog (imgUrl) {
      this.dialogImage = imgUrl
      console.log(imgUrl)
      this.dialogVisible = true
    },

    // 关闭对话框
    closeDialog () {
      this.dialogImage = ''
      this.dialogVisible = false
    },
    handleBeforeChange (index) {
      this.currentIndex = index
    }

  }
}
</script>

  <style scoped>
  .pictures-lunbo {
    text-align: center;
    /* position: relative; */
    width: 400px;
    height: 458px;
    background-color: rgba(0, 0, 0, 0.5);
    border: 2px rgba(0, 0, 0, 0.5);
  }

  .el-carousel__item img {
    max-width: 400px;
    max-height: 458px;
  }

  .control {
    align-items: center;
    padding: 3px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    margin-top: 16px;
    display:block;
    height: 35px;

  }

  .control-left,
  .control-right {
    font-size: 20px;
    cursor: pointer;
  }

  .page-indicator {
    font-size: 16px;
  }
  </style>
